<template>
  <div class="header">
    <nav class="navbar navbar-default" id="navbar" :style="{width: shrink?'85%':'100%',transition:shrink? 'all 0.8s ease':''}">
      <div>
        <div class="modal_bg" @click="handleClose" v-show="visibleUserCenter">
        </div>
        <transition name="fade">
          <div class="userCenter" v-show="visibleUserCenter">
              <user-center :userInfo="userInfo"></user-center>
          </div>
        </transition>
      </div>
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="logo-s">
            <!-- <div class="logo">
              <img src="../../assets/images/logo.png">
            </div> -->
            <h1 class="hvr-bounce-in">
              <span>WebClub</span>
            </h1>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="header-navbar" :style="{width: shrink?'85%':'100%',transition:shrink? 'all 0.8s ease':''}">
          <form class="navbar-form visible-xs" action="/Search" method="post">
            <div class="input-group">
              <input type="text" name="keyword" class="form-control" placeholder="请输入关键字" maxlength="20" autocomplete="off">
              <span class="input-group-btn">
                <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
              </span>
            </div>
          </form>
          <ul class="nav navbar-nav navbar-center">
            <li :class="active == index ?'class_active':''" @click="goNav(index)" v-for="(item,index) in navs"><router-link :to='item.url'>{{item.name}}</router-link></li>
          </ul>
          <div class="nav navbar-nav navbar-right">
              <el-dropdown @command="handleCommand" v-if="userName">
                <span class="navbar_avatar el-dropdown-link">
                  <img @click="drawer = true" v-if="userInfo.avatar"  style="margin:10px 0 ;border-radius: 50%;width: 2.5rem;height: 2.5rem" :src="$imgUrl + userInfo.avatar">
                  <span v-else @click="drawer = true" class="avatar">
                    <span>{{userInfo.username | formatString}}</span>
                  </span>
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="userCenter">个人中心</el-dropdown-item>
                  <el-dropdown-item command="loginout" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
  import loginDialog from '@/components/login/login'
  import userCenter from '@/components/userCenter'
  export default {
    data () {
      return {
        shrink:false,
        active:0,
        userInfo:{},
        visibleUserCenter:false,
        show2: false,
        fullHeight: document.documentElement.clientHeight,
        userName:'',
        navs:[
          {name:"首页",url:"/index"},
          // {name:"资讯动态",url:"/newsList"},
          {name:"交流中心",url:"/chat"},
          // {name:"在线工具",url:"/onlineTools"}
        ]
      }
    },
    inject:['reload'],
    watch:{
      $route(to){
          let navsUrl = this.navs.map(item=>item.url)
          this.active = navsUrl.indexOf(to.path)
      },
    },
    mounted () {
      if(sessionStorage.getItem('session')){
        this.getUser()
      }else{
        return
      }
      this.userName = sessionStorage.getItem('user');
      let navsUrl = this.navs.map(item=>item.url)
      this.active = navsUrl.indexOf(this.$route.path)
    },
    methods: {
      getUser(){
        let params = {
            
        };
        this.$api.getUser(params)
           .then(res => {
            if(res.code == 200){
               this.userInfo = res.data
            }
        })
      },
      handleClose(){
        this.visibleUserCenter = false
        this.shrink = false
      },
      handleCommand(name){
        if (name === 'userCenter') {
          this.visibleUserCenter = true
          this.shrink = true
        } else if (name === 'loginout') {
          // 退出登录
          this.$store.commit('logout', this)
          this.userName = ''
          this.$router.push({
            path: '/index'
          })
          this.$message({
            message: '退出登录',
            type: 'success'
          });
          this.reload()
        }
      },
      goNav(index){
         this.active = index
      }
    },
    components: {
      loginDialog,
      userCenter
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './header.less';

</style>
